<template>
  <!-- 弹框的主体部分 -->
  <div v-if="isVisible" class="modal">
    <div class="modal-content">
      <img src="../assets/icon_error.png" alt="">
      <p>{{ message }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: "出现异常！"  // 默认的异常信息
    },
    duration: {
      type: Number,
      default: 3000  // 默认弹框显示时长，单位为毫秒
    }
  },
  data () {
    return {
      isVisible: false,  // 控制弹框显示状态
    };
  },
  methods: {
    show () {
      this.isVisible = true;  // 显示弹框
      this.autoClose();  // 自动关闭
    },
    close () {
      this.isVisible = false;  // 手动关闭弹框
      this.$emit('close');  // 触发关闭事件，通知父组件
    },
    autoClose () {
      setTimeout(() => {
        this.close();  // 自动关闭弹框
      }, this.duration);  // 使用 props 传入的时间作为定时器的延迟
    }
  }
};
</script>

<style scoped lang="scss">
.modal {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
  z-index: 1000;
}

.modal-content {
  width: 122px;
  height: 49px;
  background: #FF5E0D;
  box-shadow: 0px 4px 16px 0px rgba(103, 113, 144, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    margin-right: 8px;
  }

  p {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 25px;
    text-align: center;
    font-style: normal;
  }
}

button {
  margin-top: 10px;
}
</style>
